<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/auth.css" rel="stylesheet">
    <style>
        option {
            background: rgba(255, 255, 255, 0.03);
            color: #000; /* 设置文字颜色为黑色 */
        }
    </style>
</head>
<body class="ai-bg">
   <div aria-live="polite" aria-atomic="true" class="position-relative">
       <div class="toast-container position-fixed top-0 end-0 p-3">
           {% with messages = get_flashed_messages(with_categories=true) %}
               {% if messages %}
                   {% for category, message in messages %}
                       <div class="toast align-items-center text-white bg-{{ category }} border-0" role="alert" aria-live="assertive" aria-atomic="true">
                           <div class="d-flex">
                               <div class="toast-body">
                                   {{ message }}
                               </div>
                               <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                           </div>
                       </div>
                   {% endfor %}
               {% endif %}
           {% endwith %}
       </div>
   </div>

    <!-- 背景粒子 -->
    <div class="particles">
        <div class="particle" style="left:10%;top:20%;width:8px;height:8px;animation-delay:0s"></div>
        <div class="particle" style="left:20%;top:40%;width:12px;height:12px;animation-delay:1s"></div>
        <div class="particle" style="left:80%;top:60%;width:10px;height:10px;animation-delay:2s"></div>
        <div class="particle" style="right:20%;top:30%;width:6px;height:6px;animation-delay:3s"></div>
        <div class="particle" style="right:30%;bottom:20%;width:14px;height:14px;animation-delay:4s"></div>
    </div>

    <div class="container">
        <div class="row vh-100 align-items-center justify-content-center">
            <div class="col-md-9">
                <div class="login-card">
                    <div class="card-body p-4">
                        <h1 class="text-center">
                            <i class='bx bx-bot'></i>创建账号
                        </h1>
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="company-tab" data-bs-toggle="tab" data-bs-target="#company" type="button" role="tab" aria-controls="company" aria-selected="true">企业注册</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="applicant-tab" data-bs-toggle="tab" data-bs-target="#applicant" type="button" role="tab" aria-controls="applicant" aria-selected="false">申请者注册</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="company" role="tabpanel" aria-labelledby="company-tab">
                                <form id="companyRegisterForm" action="/api/register" method="POST">
                                    <input type="hidden" name="role" value="company">
                                    <div class="mb-3">
                                        <input type="email"
                                            class="form-control"
                                            placeholder="请输入邮箱"
                                            name="email"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="password"
                                            class="form-control"
                                            placeholder="请输入密码"
                                            name="password"
                                            required
                                            style="z-index: 1; position: relative;">
                                    </div>
                                    <div class="mb-4">
                                        <input type="password"
                                            class="form-control"
                                            placeholder="请确认密码"
                                            name="confirm_password"
                                            required
                                            style="z-index: 1; position: relative;">
                                    </div>
                                    <div class="mb-3">
                                        <input type="text"
                                            class="form-control"
                                            placeholder="请输入公司名称"
                                            name="company_name"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="text"
                                            class="form-control"
                                            placeholder="请输入行业"
                                            name="industry"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="text"
                                            class="form-control"
                                            placeholder="请输入地址"
                                            name="address"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <select class="form-select"
                                                name="scale"
                                                required>
                                            <option value="">请选择公司规模</option>
                                            <option value="1-50人">1-50人</option>
                                            <option value="51-100人">51-100人</option>
                                            <option value="101-500人">101-500人</option>
                                            <option value="500人以上">500人以上</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <input type="text"
                                            class="form-control"
                                            placeholder="请输入官网"
                                            name="website">
                                    </div>
                                    <div class="mb-3">
                                        <input type="text"
                                            class="form-control"
                                            placeholder="请输入联系电话"
                                            name="contact_phone"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <textarea class="form-control" placeholder="请输入公司描述" name="description" rows="4"></textarea>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100 mb-3">
                                        企业注册
                                    </button>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="applicant" role="tabpanel" aria-labelledby="applicant-tab">
                                <form id="applicantRegisterForm" action="/api/register" method="POST">
                                    <input type="hidden" name="role" value="applicant">
                                    <div class="mb-3">
                                        <input type="email"
                                            class="form-control"
                                            placeholder="请输入邮箱"
                                            name="email"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="password"
                                            class="form-control"
                                            placeholder="请输入密码"
                                            name="password"
                                            required
                                            style="z-index: 1; position: relative;">
                                    </div>
                                    <div class="mb-4">
                                        <input type="password"
                                            class="form-control"
                                            placeholder="请确认密码"
                                            name="confirm_password"
                                            required
                                            style="z-index: 1; position: relative;">
                                    </div>
                                    <div class="mb-3">
                                        <input type="text"
                                            class="form-control"
                                            placeholder="请输入全名"
                                            name="full_name"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <select class="form-select"
                                                name="gender"
                                                required>
                                            <option value="">请选择性别</option>
                                            <option value="male">男</option>
                                            <option value="female">女</option>
                                            <option value="other">其他</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <input type="date"
                                            class="form-control"
                                            placeholder="请输入出生日期"
                                            name="birthdate"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <select class="form-select"
                                                name="education_level"
                                                required>
                                            <option value="">请选择教育水平</option>
                                            <option value="高中">高中</option>
                                            <option value="大专">大专</option>
                                            <option value="本科">本科</option>
                                            <option value="硕士">硕士</option>
                                            <option value="博士">博士</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <input type="number"
                                            class="form-control"
                                            placeholder="请输入工作年限"
                                            name="work_years"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="text"
                                            class="form-control"
                                            placeholder="请输入期望职位"
                                            name="expected_position"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <input type="number"
                                            class="form-control"
                                            placeholder="请输入期望薪资"
                                            name="expected_salary"
                                            required>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100 mb-3">
                                        申请者注册
                                    </button>
                                </form>
                            </div>
                        </div>
                        <div class="text-center">
                            <a href="/loginView" class="text-decoration-none">已有账号？立即登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../js/auth.js"></script>

   <script>
       document.addEventListener('DOMContentLoaded', function () {
           var toastElList = [].slice.call(document.querySelectorAll('.toast'));
           var toastList = toastElList.map(function (toastEl) {
               return new bootstrap.Toast(toastEl, {
                   autohide: true,
                   delay: 5000 // 5秒后自动隐藏
               });
           });
           toastList.forEach(function (toast) {
               toast.show();
           });
       });
   </script>

</body>
</html>